<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>订单支付</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Animate.css -->
    <link rel="stylesheet" href="/css1/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="/css1/icomoon.css">
    <!-- Ion Icon Fonts-->
    <link rel="stylesheet" href="/css1/ionicons.min.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="/css1/bootstrap.min.css">

    <!-- Magnific Popup -->
    <link rel="stylesheet" href="/css1/magnific-popup.css">

    <!-- Flexslider  -->
    <link rel="stylesheet" href="/css1/flexslider.css">

    <!-- Owl Carousel -->
    <link rel="stylesheet" href="/css1/owl.carousel.min.css">
    <link rel="stylesheet" href="/css1/owl.theme.default.min.css">

    <!-- Date Picker -->
    <link rel="stylesheet" href="/css1/bootstrap-datepicker.css">
    <!-- Flaticons  -->
    <link rel="stylesheet" href="/fonts/flaticon/font/flaticon.css">

    <!-- Theme style  -->
    <link rel="stylesheet" href="/css1/style.css">

</head>
<body>
<!--头部-->
<th:block th:include="header"/>


<div class="colorlib-loader"></div>

<div id="page">
    <nav class="colorlib-nav" role="navigation">
        <div class="top-menu">
            <div class="container">
                <div class="row">
                    <div class="col-sm-7 col-md-9">
                        <div id="colorlib-logo"><a>订单支付</a></div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-sm-12 text-left menu-1">
                        <ul>
                            <li><a href="/">继续购物</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="sale">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 offset-sm-2 text-center">
                        <div class="row">
                            <div class="owl-carousel2">
                                <div class="item">
                                    <div class="col">
                                        <h3><a href="#">请打开 支付宝 扫码，完成订单支付</a></h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col">
                                        <h3><a href="#">感谢您对本平台的支持</a></h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <div class="breadcrumbs">
        <div class="container">
            <div class="row">
                <div class="col">
                    <p class="bread"><span><a href="/cart">购物车</a></span> / <span>订单结算</span></p>
                </div>
            </div>
        </div>
    </div>


    <div class="colorlib-product">
        <div class="container">

            <h3>打开支付宝扫一扫~</h3>
            <h4>请在30分钟内完成订单支付，否则订单取消</h4>
            <img th:src="${'https://api.qrserver.com/v1/create-qr-code/?data=' + qrCode}" alt="" src="">
        </div>
    </div>
</div>

<div class="gototop js-top">
    <a href="#" class="js-gotop"><i class="ion-ios-arrow-up"></i></a>
</div>
<!--尾部-->
<th:block th:include="footer"/>
<!-- jQuery -->
<script src="/js1/jquery.min.js"></script>
<!-- popper -->
<script src="/js1/popper.min.js"></script>
<!-- bootstrap 4.1 -->
<script src="/js1/bootstrap.min.js"></script>
<!-- jQuery easing -->
<script src="/js1/jquery.easing.1.3.js"></script>
<!-- Waypoints -->
<script src="/js1/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="/js1/jquery.flexslider-min.js"></script>
<!-- Owl carousel -->
<script src="/js1/owl.carousel.min.js"></script>
<!-- Magnific Popup -->
<script src="/js1/jquery.magnific-popup.min.js"></script>
<script src="/js1/magnific-popup-options.js"></script>
<!-- Date Picker -->
<script src="/js1/bootstrap-datepicker.js"></script>
<!-- Stellar Parallax -->
<script src="/js1/jquery.stellar.min.js"></script>
<!-- Main -->
<script src="/js1/main.js"></script>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/lay-module/common/common.js" charset="utf-8"></script>

<script type="text/javascript">
    layui.use(['form', 'table', 'layer', 'common', 'laytpl'], function () {
        let $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer,
            laytpl = layui.laytpl;

        let id = '[[${order.id}]]';

        let loadStatus = function () {
            $.get("/order/payStatus/" + id, function (status) {
                if (status === 0) {
                    loadStatus();
                } else {
                    window.location.href = "/member/personal";
                }

            });

        };

        loadStatus();

        $("#pay").on("click", function () {
            layer.msg("付款成功", {
                icon: 1,
                time: 2500
            }, function () {
                $.post("/order/setStatus?id=" + id, function () {});
            });
        });


    });
</script>

</body>
</html>


